$(function () {
    // 设置全局变量
    let params = {
        // string 搜索关键词，可以为空，为空返回某类型所有文章 
        key: '',
        // string 文章类型id，可以为空，为空返回所有类型文章 
        type: '',
        // string 文章状态，草稿 ，已发布,为空返回所有状态文章 
        state: '',
        // number 当前页，为空返回第1页 
        page: '',
        // number 每页显示条数，为空默认每页6条 
        perpage: 10
    }

    articleQuery()

    // 搜索文章
    function articleQuery() {
        $.ajax({
            url: 'http://localhost:8080/api/v1/admin/article/query',
            data: params,
            headers: { Authorization: localStorage.getItem('token') },
            success(res) {
                console.log(res)
                if (res.code === 200) {
                    let html = template('trTemp', res)
                    $('table tbody').html(html)
                    renerPager(res.data.totalCount)
                } else {
                    console.log('获取失败')
                }
            }
        })
    }

    // 动态渲染layui分页组件(laypage)
    // laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染：
    function renerPager(totalCount) {      //totalCount数据总条数
        console.log(totalCount)
        let laypage = layui.laypage
        laypage.render({
            elem: 'pager', //注意，这里是ID，不用加 # 号
            limit: params.perpage,  //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数
            curr: params.page,
            count: totalCount, //数据总数，从服务端得到
            jump(obj, first) {
                if (!first) {
                    params.page = obj.curr
                    articleQuery()
                }
            }
        })
    }

    // 文章分类,下拉列表
    getArticleCategory()
    function getArticleCategory() {
        $.ajax({
            url: 'http://localhost:8080/api/v1/admin/category/list',
            headers: { Authorization: localStorage.getItem('token') },
            success(res) {
                if (res.code === 200) {
                    console.log(res.data)
                    // reduce函数拼接字符串,reduc会循环res.data这个数组
                    const html = res.data.reduce((html, value) => html += `<option value='${value.id}'>${value.name}</option>`, `<option value=''>所有分类</option>`)
                    $('#selCategory').html(html)
                } else {
                    console.log('获取失败')
                }
            },
        })
    }

    //筛选数据,筛选按钮事件
    $('#btnSearch').on('click', function () {
        // 获取筛选框的值
        params.key = $('#aname').val().trim()
        // 获取文章类型id
        params.type = $('#selCategory').val()
        // 获取文章状态
        params.state = $('#selStatus').val()
        params.page = 1
        articleQuery()
        // bug:点击22页.params.page=22;点击草稿,params.state=11
        // 解决bug:点击筛选时重置页数
    })

    // 重置按钮事件
    $('#btnReset').on('click', function () {
        // 重置组件
        $('#aname').val('')
        $('#selCategory').val('')
        $('#selStatus').val('')
        // 重置接口参数
        params = {
            key: '',
            type: '',
            state: '',
            page: '',
            perpage: 10
        }
        // 重新获取
        articleQuery()
    })

    // 文章删除
    $('table tbody').on('click', '.delete', function () {
        layer.confirm('确定删除吗?', (index) => {
            const id = $(this).parents('tr').data('id')
            console.log(id)
            $.ajax({
                url: 'http://localhost:8080/api/v1/admin/article/delete',
                type: 'post',
                data: { id },
                headers: { Authorization: localStorage.getItem('token') },
                success(res) {
                    if (res.code == 200) {
                        articleQuery()
                        layer.close(index)
                    } else {
                        console.log('失败')
                        console.log(res)
                    }
                }
            })
        })
    })
})